<template>
    <el-card shadow="hover" class="notice">
        <template #header>
            <div class="header">
                <div style="flex: 1 ;display: flex;gap: 10px;">
                    <el-icon>
                        <Message />
                    </el-icon>
                    <el-text type="info">
                        消息通知
                    </el-text>
                </div>
                <el-button link style="">更多</el-button>
            </div>
        </template>
        <!-- card body -->
    </el-card>

</template>


<script>
export default {
    title: '消息通知',
    icon: 'ChatSquare',
    description: '消息通知',
};
</script>

<style lang="scss" scoped>
.notice {
    .header {
        display: flex;
        // height: 58px;
        flex-direction: row;
        padding: 0 !important;
        margin: 0;
        gap: 5px;
        align-items: center;
    }

    :deep(.el-card) {
        display: flex;
        flex-direction: column;
        flex: 1 auto;


        .el-card__body {
            flex: 1 auto;
            height: calc(100% - 58px);
        }
    }
}
</style>